import React from 'react';

import { useState, useRef, useEffect, createRef } from 'react';
import Child from './Child';
// createRef 和 useRef 可以替换使用,
// 注意: 在类组件中只能使用 createRef,在函数组件中两者皆可使用;
// 区别: useRef() 初始化执行完毕,就不在调用执行了, createRef 每次执行都会重新创建一个ref 引用对象

const Father = () => {
    const [user, setUser] = useState({ name: '陈戍源', age: 50 });
    // 步骤1: 创建一个ref 引用对象
    const ref1 = createRef();
    // console.log('ref1', ref1)
    const ref2 = createRef();
    useEffect(() => {
        // ref 属性绑定在标签上,ref 的值为标签的原生dom 节点
        // console.log('ref1', ref1.current.innerHTML);
        // console.log('ref2', ref2.current);

    })

    const editChildTeacherFn = () => {
        ref2.current.editTeacher()
    }
    return (
        <div>
            我是父组件
            {/* 标签上绑定ref */}
            <p ref={ref1}>{user.name}--{user.age}</p>
            {/* 组件上绑定ref
            注意:在函数组上默认不能使用ref, 如果需要使用, 需要使用ForwardRef 高阶组件包裹要使用ref的子组件
             */}
            <Child ref={ref2}></Child>
            {/* <p>父组件中:{ref2.current.Teacher}</p> */}
            <p>ref2:{JSON.stringify(ref2)}</p>
            <button onClick={() => editChildTeacherFn()}>修改子组件中的数据</button>
        </div>
    );


}

export default Father;
